<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <div id="app">
    <router-view></router-view>
    <audio id="alarmAudio" src="./static/audio.mp3" style="opacity:0;display:none;width: 0;height: 0" preload="auto" controls="" hidden="true"></audio>
  </div>
</template>

<script>
  export default {
    name: "APP",
    data() {
      return {
        websock: null,
        lockReconnect:false,
        timeout: 30000,//30s
        timeoutObj: null,
        serverTimeoutObj: null,
      }
    },
    computed: {
      token() {
        return this.$store.state.user.token;
      }
    },
    methods: {
      reset: function(){
        clearTimeout(this.timeoutObj);
        clearTimeout(this.serverTimeoutObj);
        this.start();
      },
      start: function(){
        var self = this;
        this.timeoutObj = setTimeout(function(){
          self.websock.send("HeartBeat");
          self.serverTimeoutObj = setTimeout(function(){
            self.websock.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
          }, self.timeout)
        }, this.timeout)
      },
      goAlarm(){
        this.instance.close();
        // this.$router.push('/gailan/exceptionRecord')
        //你要跳转的路由 可以传参
      },
      openMessage(redata,alarmItem){
        const h = this.$createElement;
        //暂停之前的播放
        document.querySelector('#alarmAudio').pause()
        document.querySelector('#alarmAudio').play()
        this.instance=this.$notify({
          title:redata.bname,
          customClass:alarmItem.alarmStatus==1?'global-notify-alarm alarm-notify-pos':'alarm-notify-pos',
          iconClass:'el-icon-warning',
          message:h('span',{
            on:{
              click:this.goAlarm
            }
          },redata.equipmentType?redata.equipmentType:'主机'+'设备'+alarmItem.alarmType),
          duration: 3000*20*3,
        })
      },
      wsreconnect(){
        if(this.lockReconnect) return;
        this.lockReconnect = true;
        // 没连接上会一直重连
        setTimeout(()=>{
          this.initWebSocket();
          this.lockReconnect = false
        },3000)

      },
      initWebSocket() {
        //初始化weosocket
        let userid = this.$store.state.user.userId==''?this.$store.state.user.adminid : this.$store.state.user.userId;
        var wsUrl;
        if('https:' === document.location.protocol){
          // wsUrl = (process.env.WS_API).replace('ws','wss')
          wsUrl="wss://"+document.location.host
        }else{
          wsUrl="ws://"+document.location.host
          // wsUrl = process.env.WS_API
        }
        //ws地址
        // const wsuri ="ws://192.168.0.44:2345/alarm/websocket?userId="+userid;
        const wsuri = wsUrl + "/alarm/websocket?userId="+userid;
        this.websock = new WebSocket(wsuri);
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onclose = this.websocketclose;
        this.websock.onerror = this.websocketerror;
        this.websock.onopen = this.websocketopen;
      },
      websocketopen(){
        this.start();
      },
      websocketerror(e){
        // 出现错误
        console.log(e);
      },
      websocketonmessage(e) {
        this.reset();
        //数据接收

        const redata = JSON.parse(e.data);

        if(redata.alarmdate){
          //触发地图数据实时更新
          this.bus.$emit("getBuildingStatus");
          // 循环处理报警信息
          let ntyAlarms = redata.alarms;
          ntyAlarms.forEach((item)=>{
            setTimeout(()=>{
              this.openMessage(redata,item)
            },300)
          })
        }
      },
      websocketclose(e) {
        //关闭
        this.wsreconnect();
        console.log("connection closed (" + e.code + ")");
      }
    },
    mounted() {
      // 如果是登录状态
      if(this.$store.state.user.token){
        this.wsreconnect();
      }
    },
    watch: {
      token: function(val) {
        if (val) {
          // 登录成功
          this.initWebSocket();
        } else {
          // 未登录
        }
      }
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss">
  @font-face {
    font-family:'digital';
    src: url('./styles/font/Digital-7Mono.ttf') format('truetype');
  }
  .code-popper{
      background: #fff;
      border-color: #ebeef5;
      .codeimg-group{
          display: flex;
          justify-content: center;
          .codeimg-item{
              img{
                  width: 110px;
              }
              p{
                  margin: 0;
                  text-align: center;
                  font-size: 12px;
              }
          }
      }
  }
  .app-container{
    padding-top: 0;
  }
  .com-uplist-title{
    font-size: 18px;
    color: #50E3C2;
    line-height: 28px;
    i{
      color: rgba(80, 227, 194, 0.5);
    }
  }
  .right-tree-title{
    color: #50E3C2;
    font-size: 18px;
    i{
      color: rgba(80, 227, 194, 0.5);
    }
  }
  .comm-tree-wrap{
    position: relative;
    padding: 5px 0 20px 10px;
    background: linear-gradient(-140deg, transparent 2em, #0A1722 0);
  }
  .comm-table-btn{
    padding-right: 12px;
    cursor: pointer;
  }
  .global-notify-alarm .el-icon-warning{
    color: #f56c6c !important
  }
  .xf-jc-dialog {
    .dialog-footer {
      text-align: left;
    }
  }
  .alarm-notify-pos{
    z-index:9999;
  }
  .pagination-container{
    margin-top: 0;
    .el-pagination{
      text-align: right;
      padding: 10px 0;
    }
  }
  .flex-left-pannel {
    width: 100%;
    padding-right: 10px;
    padding-top: 10px;
  }
/* 全屏弹窗custom*/
  .dialog-header-wrap{
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(80, 227, 194, 0.7);
    margin: 10px 20px;
    .line-with-verticl{
      border-bottom: 1px solid rgba(80, 227, 194, 0.7);
    }
    .dialog-header-handle{
      display: flex;
      justify-content: space-between;
      color: #50E3C2;
      .plantitle{
        line-height: 40px;
        color: #50E3C2;
        padding: 0 15px;
      }
      .handle-tools{
        display: flex;
        align-items: center;
        &>div{
          padding: 0 10px;
          cursor: pointer;
        }
        /*未标记*/
        .map-warning-num{
          height: 40px;
          line-height: 40px;
          color:#f5a623;
          font-size: 14px;
          font-family: PingFangHK-Regular;
          vertical-align: middle;
          .icon-jinggao{
            font-size: 22px;
            vertical-align: top;
          }
        }
        .dialog-handle-items{
          font-size: 18px;
        }
        .map-listchange__mode{
          color: rgba(255, 255, 255, 0.7);
          i{
            margin-right: 5px;
          }
          &.list-mode-select,&.map-mode-select{
            color: #50E3C2;
          }
        }
      }
    }
  }
  .fulldialog{
    &.pointer-plan{
      .el-main{
        padding: 0;
        height: calc(100% - 66px);
        overflow: hidden;
        position: relative;
        .plan-pannel{
          width: 360px;
          height: calc(100% - 66px);
          position: absolute;
          top: 0;
          left: 0;
          background: #0A1722;
          transform: translateX(0px);
          transition: all 0.3s;
        }
      }
      .realtime-tabchange{
        background: #132230;
      }
      .pannel-address{
        p{
          color: rgba(255, 255, 255, 0.7);
        }
      }
      .f-title,
      .ps-title,
      .ar-title {
        font-size: 18px;
        color:#50E3C2;
        padding-bottom: 10px;
        margin: 0;
        i{
          color: rgba(80, 227, 194, 0.5);
        }
      }
      .realtime-change-content{
        position: relative;
      }
      .pannel-sensor-list{
        .sensor-list{
          li{
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            line-height: 23px;
            .type-num{
              font-family: 'digital';
              color: #50E3C2;
              font-size: 20px;
            }
          }
        }
      }
      .recorde-list{
        li:hover{
          background: rgba(0,0,0,.3);
        }
      }
      .pannel-alarm-floor{
        min-height: 148px;
        .floor-list-icon {
          font-size: 20px;
          margin-right: 10px;
        }
        span {
          display: inline-block;
          width: 43px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.7);
          margin-right: 5px;
          margin-bottom: 5px;
          cursor: pointer;
          &.type-wran {
            background: rgba(219, 54, 29, 0.15);
            border:1px solid rgba(219,54,29,0.4);
          }
          &.type-abnormal {
            border:1px solid rgba(245,166,35,0.4);
            background: rgba(245, 166, 35, 0.15);
          }
        }
      }
    }
    .item-date{
      color: rgba(255,255,255,.7);
    }
    .recorde-title{
      font-size: 14px;
      line-height: 28px;
      display:inline-block;
      width:95%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #fff;
    }
    /*设备统计下的样式*/
    .device-chart-box{
      background: #132230;
      color: #f5a623;
      font-size: 14px;
      font-family: PingFangHK-Regular;
      border-radius: 2px;
      box-sizing: border-box;
      padding: 0 20px;
      margin-top: 40px;
      .icon-jinggao{
        font-size: 22px;
        margin-right: 10px;
      }
      .el-button{
        position: relative;
        left: 60px;
      }
    }
    .plan-floor-item {
      cursor: pointer;
      font-size: 14px;
      width: 53px;
      text-align: center;
      line-height: 28px;
      margin:0 0 8px 0;
      height: 28px;
      border-radius: 3px;
      color: #fff;
      background:rgba(80, 227, 194, 0.15);
      border: 1px solid rgba(80, 227, 194, 0.4);
      &.floor-selected{
        background: rgba(80, 227, 194, 0.7);
        border-color: rgba(80, 227, 194, 1);
      }
      &.floor-breakdown{
        border-color: rgba(248, 231, 28, 0.4);
        background: rgba(248, 231, 28, 0.15);
        &.floor-selected{
          border-color:rgba(245, 166, 35, 1);
          background: rgba(245, 166, 35, 0.7);
        }
      }
      &.floor-alarm{
        border-color: rgba(219, 54, 29, 0.4);
        background: rgba(219, 54, 29, 0.15);
        &.floor-selected{
          border-color:rgba(219, 54, 29, 1);
          background: rgba(219, 54, 29, 0.7);
        }
      }

    }
  }
  .mypopper{
    border:0;
    border-left: 1px solid rgba(80, 227, 194, 0.7);
    border-right: 1px solid rgba(80, 227, 194, 0.7);
    background: rgba(7, 16, 24, 0.8);
    border-radius: 0;
    &:before{
      content:'';
      position: absolute;
      height: 100%;
      width: 8px;
      top:0;
      left: -4px;
      border-top: 1px solid rgba(80, 227, 194, 0.7);
      border-bottom: 1px solid rgba(80, 227, 194, 0.7);
    }
    &:after{
      content:'';
      position: absolute;
      height: 100%;
      width: 8px;
      top:0;
      right: -4px;
      border-top: 1px solid rgba(80, 227, 194, 0.7);
      border-bottom: 1px solid rgba(80, 227, 194, 0.7);
    }
    .sensor-detail-box{
      .ss-header-box{
        .ss-title{
          color: #50E3C2;
        }
        .ss-address{
          font-size: 12px;
          color: rgba(255,255,255,.7);
          padding: 6px 0 0;
          i{
            margin-right: 5px;
          }
        }
        .ss-datetime{
          font-size: 12px;
          color: rgba(255,255,255,.7);
          padding-bottom: 6px;
          i{
            margin-right: 5px;
          }
        }
      }
      .ss-status-title{
        color: #fff;
      }
      .no-list-text{
        color: rgba(255,255,255,.7);
      }
    }
  }
  .SlidingPanelContent {
    overflow-y: auto;
    padding: 20px 20px 20px 20px;
    .sensor-realtime-status{
      color: rgba(255, 255, 255, 0.7);
      font-size: 14px;
      &>span{
        margin-right: 20px;
      }
    }
    .ac-header-wrap{
      display: flex;
      padding-top: 20px;
      .ac-header-withtitle{
        font-size: 18px;
        color: #50E3C2;
        font-family: PingFangSC-Semibold;
        font-weight: bold;
        line-height: 32px;
      }
      .ac-header-icons{
        font-size: 12px;
        color: rgba(255, 255, 255, 0.7);;
        padding-left: 30px;
        line-height: 26px;
        span{
          vertical-align: text-top;
          margin-right: 16px;
          .svg-icon{
            margin-right: 5px;
          }
        }
      }
    }
    .data-btn-left{
      h2{
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
        font-weight: normal;
      }
      .el-button{
        margin-bottom:10px;
        margin-right:10px !important;
      }
    }
    .fire-bot-chart{
      position:relative;
      margin-top:20px;
    }
    .history-record h2{
      color:#50E3C2;
      font-size: 18px;
      font-family: PingFangSC-Semibold;
    }
  }
  .table-data-none{
    position:absolute;
    width:100%;
    height:290px;
    top:0;
    text-align:center;
    line-height:290px;
    color: rgba(255,255,255,0.7);
    background:rgba(0,0,0,.6);
  }
  .xf-tableft-title{
    font-size: 18px;
    color: #50E3C2;
    margin-right: 25px;
    line-height: 34px;
    i{
      color: rgba(80, 227, 194, 0.5);
    }
  }
  .xf-tabletop-handles{
    padding-bottom: 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: space-between;
    .xf-tab-bts {
      vertical-align: bottom;
      margin-right: 80px;
    }
    .xf-custom-poper{
      margin-left: 10px;
    }
  }
  .amap-info-content{
    color:#606266;
  }
  .fulldialog .el-dialog__header{
    .el-dialog__title{
      color: #50E3C2;
    }
  }
  .fulldialog .custom-dialog-btn{
    color: #fff!important;
  }
  .fulldialog{
    &.outer-route-dialog{
      .el-main {
        padding: 0 0 10px 20px;
        height: calc(100% - 60px);
        overflow: hidden;
        position: relative;
      }
      .plantitle{
        color: #50E3C2;
      }

    }
    &.route-dialog{
      .flex-left-pannel_withline{
        border-right: 1px solid rgba(80,277,194,.7);
      }
      .plantitle{
        color: #50E3C2;
      }
      .el-main {
        padding: 0;
        height: calc(100% - 60px);
        overflow: hidden;
        position: relative;
      }
    }
  }
  .el-cascader__label{
    span{
      color: currentColor;
    }
  }
  .pointer-plan{
    &:before{
      border:0;
    }
  }
  .scroll-wrap{
    height: calc(100vh - 40px);
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
  .dialog-within-scroll{
    height: calc(100vh - 200px);
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
  .basicinfo{
    display:flex;
    justify-content: space-between;
    margin-top:18px;
    color: #50E3C2;
    .buildtitle{
      font-size: 18px;
      i{
        color: rgba(80, 227, 194, 0.5);
      }
    }
  }
  .untreated-list{
    height: calc(100vh - 220px);
  }
  .plantitle{
    color: #50E3C2;
  }
  .el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover{
    color: #fff;
    background-image: none;
    background-color: transparent;
    border-color:transparent;
  }
  .top-handle-tab{
    .line-with-verticl{
      border-bottom: 1px solid rgba(80,277,194,.7);
    }
  }
  .record-top-wrap{
    color: rgba(80, 227, 194, 0.6);
    display: flex;
    justify-content: space-between;
    .record-items-left{
      display: flex;
      .over-topline{
        border-bottom: 1px solid rgba(80, 227, 194, 0.7);
      }
      .record-item{
        min-width: 274px;
        border-bottom: 1px solid rgba(80, 227, 194, 0.7);
        margin-right: 15px;
        padding-bottom: 18px;
        background: linear-gradient(90deg,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.15) 100%);
        .li_box{
          text-align: center;
          p{
            font-size: 14px;
            margin-bottom: 12px;
            margin-top: 28px;
            i{
              margin-right: 5px;
            }
          }
          h1{
            font-size: 48px;
            margin: 0;
            font-family: 'digital';
            text-shadow:0px 0px 5px currentColor;
            font-weight: normal;
          }
        }
      }
    }
    .record-items-right{
      width: 100%;
      margin-right: 20px;
      .chart-title{
        font-size: 18px;
        font-weight: bold;
        margin: 0;
        i{
          color: rgba(80, 227, 194, 0.5);
        }
      }
      #record_chart{
        min-width: 280px;
        height: 130px;
      }
    }
  }
  .delBuildConfirm{
    background: #132230;
    position: relative;
    border: 0;
    border-radius: 0;
    .el-message-box__title{
      color:#50E3C2;
    }
    .el-message-box__content{
      color: rgba(255,255,255,.7);
    }
    &:before{
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      border:2px solid #50E3C2;
      clip-path: polygon(0 0,30px 0,30px 100%,0 100%);
    }
  }
  .out-side-frame {
    padding: 20px 50px 0;
  }
  .form-content-frame {
    padding: 10px 0 20px 0;
    height: 100%;
    overflow: auto;
  }
  .el-date-editor {
    .el-range-input[placeHolder=结束日期] {
      margin-left: 15px;
    }
  }
  .xf-dbform-item__label {
    font-size: 14px;
    color: rgba(255,255,255,.7);
    font-weight: 700;
  }
  .xf-tabhd-title{
    color: #50E3C2;
    font-size: 18px;
    padding-right: 20px;
    i{
      opacity: 0.5;
    }
  }
  .map-tool {
    height: calc(100vh - 73px);
    position: absolute;
    top:73px;
    right: 0;
    .map-tool__left {
      float: right;
      display: flex;
      .map-tool-sensors {

        cursor: pointer;
        position: relative;
        &.toolsexpand {

        }
      }
    }
    .map-tool__right {
      box-sizing: border-box;
      padding-left: 0;
      width: 0px;
      float: right;
      transition: width 0.3s;
      .icon-nf-copy{
        float: right;
        cursor: pointer;
        padding-right: 10px;
        position: relative;
        .icon-nf-copy-btn{
          position: absolute;
          opacity: 0;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
        }
      }
      &.toolspannel {
        width: 350px;
        height: calc(100vh - 51px);
        padding-left: 10px;
        padding-right: 10px;
        transition: width 0.3s;
        position: relative;
        .map-tool-rightwrap{
          height: 100%;
          position: relative;
          .unhandle-list{
            width: 100%;
            margin-top: 14px;
            .el-radio-button{
              width: 35%;
              .el-radio-button__inner{
                width: 100%;
              }
            }
          }
          .untreated-list{
            position: relative;
            background: linear-gradient(-140deg, transparent 2em, rgba(0, 0, 0, 0.6) 0);
            .none-list{
              font-size: 14px;
              text-align: center;
              margin: 0;
              line-height: 4;
              color: rgba(255, 255, 255,.5);
            }
            .untreated-list-item{
              margin: 0 20px;
              padding-top: 5px;
              margin-top: 10px;
              border-bottom: 1px solid rgba(80, 227, 194, 0.3);
              &:after{
                opacity: 0.3;
              }
              &:before{
                opacity: 0.3;
              }
              dt{
                font-size: 14px;
                font-weight: bold;
                color: #50E3C2;
                padding: 5px 0;
                i{
                  color: #8E9098;
                  font-size: 16px;
                  margin-right: 10px;
                  vertical-align: text-top;
                }
              }
              dd{
                margin: 0;
                font-size: 14px;
                color: rgba(255, 255, 255, 0.7);
                padding: 5px 0;
                padding-left: 23px;
                .untreated-sensor-detail{
                  display: flex;
                  div{
                    padding: 4px 10px;
                    font-size: 12px;
                    background: linear-gradient(-130deg, transparent 0.6em, rgba(226, 96, 41, 0.7) 0);
                    border-radius: 2px;
                    margin-right: 5px;
                    &.measuringPoint{
                      background: linear-gradient(-130deg, transparent 0.6em, rgba(80, 227, 194, 0.4) 0);
                    }
                  }
                  &.abnormal-detail{
                    div{
                      background: linear-gradient(-130deg, transparent 0.6em, rgba(245, 166, 35, 0.7) 0);
                      &.measuringPoint{
                        background: linear-gradient(-130deg, transparent 0.6em, rgba(80, 227, 194, 0.4) 0);
                      }
                    }
                  }
                }
                &.untreated-handle{
                  .el-button--text{
                    font-size: 14px;
                    color: #50E3C2;
                  }
                }
              }
            }
          }
        }
        .all-sensor-list{
          display: flex;
          text-align: center;
          border-bottom: 1px solid #50E3C2;
          margin-top:12px;
          .all-sensor-list__item{
            flex: 1;
            font-size: 14px;
            color: rgba(80, 227, 194, 0.6);
            p{
              margin: 0;
            }
            .count{
              font-size: 40px;
              font-family: 'digital';
              text-shadow:0px 0px 5px currentColor;
            }
          }
        }
      }
    }
  }
  .tool-wrap{
    position: absolute;
    top: 0px;
    margin-left: -850px;
    &.map-width-select{
      margin-left: -330px;
      .over-topline{
        min-width: 300px;
      }
    }
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(80, 227, 194, 0.7);
    .over-topline{
      border-bottom: 1px solid rgba(80, 227, 194, 0.7);
      min-width: 840px;
    }
    .tool-wrap-items{
      display: flex;
      .map-listchange__mode,.map-tool-item,.map-dotshow-wrap{
        line-height: 36px;
        cursor: pointer;
        padding: 0 15px;
      }
      .map-dotshow-wrap{
        padding-left: 0;
        &>span{
          i{
            display: inline-block;
            width:8px;
            height: 8px;
            border-radius: 50%;
            margin: 0 10px;
          }
        }
        .css-icon-warning {
          background: #ff0000;
          box-shadow: 0 0 10px #ff0000;
        }
        .css-icon-breakdown {
          background: #f08719;
          box-shadow: 0 0 10px #f08719;
        }
      }
      .map-search{
        display: flex;
        .el-dropdown{
          line-height: 36px;
          cursor: pointer;
          color: #50E3C2;
        }
      }
      .map-tool__left{
        line-height: 36px;
        padding: 0 12px 0 10px;
        cursor: pointer;
        color: #50E3C2;
        .class-icon-hide{
          display:inline;
        }
        .class-icon-show{
          display:none;
        }
        .toolsexpand{
          .class-icon-show{
            display:inline;
          }
          .class-icon-hide{
            display: none;
          }
        }
      }
    }

    .map-mode-select,.list-mode-select{
      color:#50E3C2;
    }
  }
</style>
